<!DOCTYPE html>
<!--[if lt IE 7 ]> <html lang="en" class="no-js ie6 lt8"> <![endif]-->
<!--[if IE 7 ]>    <html lang="en" class="no-js ie7 lt8"> <![endif]-->
<!--[if IE 8 ]>    <html lang="en" class="no-js ie8 lt8"> <![endif]-->
<!--[if IE 9 ]>    <html lang="en" class="no-js ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang="en" class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="UTF-8" />
        <!-- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  -->
        <title>登陆账号</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Login and Registration Form with HTML5 and CSS3" />
        <meta name="keywords" content="html5, css3, form, switch, animation, :target, pseudo-class" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="./pub/css/demo.css" />
        <link rel="stylesheet" type="text/css" href="./pub/css/style.css" />
        <link rel="stylesheet" type="text/css" href="./pub/css/animate-custom.css" />
    </head>
    <body>
        <div class="container">
            <!-- Codrops top bar -->
            <div class="codrops-top">
                <a href="">
                    <strong>&laquo; 演示: </strong>响应内容导航
                </a>
                <span class="right">
                    <a href=" http://tympanus.net/codrops/2012/03/27/login-and-registration-form-with-html5-and-css3/">
                        <strong>回到codrops第</strong>
                    </a>
                </span>
                <div class="clr"></div>
            </div><!--/ Codrops top bar -->
            <header>
                <h1>登陆 <span>我的博客</span></h1>
                <!-- <nav class="codrops-demos">
                    <span>点击 <strong>"加入我们"</strong> 看窗体开关</span>
                    <a href="index.html" class="current-demo">演示 1</a>
                    <a href="index2.html">演示 2</a>
                    <a href="index3.html">演示 3</a>
                </nav> -->
            </header>
            <section>               
                <div id="container_demo" >
                    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
                    <a class="hiddenanchor" id="toregister"></a>
                    <a class="hiddenanchor" id="tologin"></a>
                    <div id="wrapper">
                        <div id="login" class="animate form">
                            <form  action="logindo.php" autocomplete="on"> 
                                <h1>登录</h1> 
                                <p> 
                                    <label for="username" class="uname" data-icon="u" > 您的电子邮件或用户名 </label>
                                    <input id="username" name="name" required="required" type="text" maxlength="20" placeholder="请输入账号或者邮箱"/>
                                </p>
                                <p> 
                                    <label for="password" class="youpasswd" data-icon="p"> 你的密码 </label>
                                    <input id="password" name="pass" required="required" maxlength="18" type="password" placeholder="请输入密码" /> 
                                </p>
                                <p class="keeplogin"> 
                                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                                    <label for="loginkeeping">记住密码？</label>
                                </p>
                                <p class="login button"> 
                                    <input type="submit" value="登陆" /> 
                                </p>
                                <p class="change_link">
                                    尚未注册 ?
                                    <a href="#toregister" class="to_register">加入我们</a>
                                </p>
                            </form>
                        </div>



<!--注册界面-->
                        <div id="register" class="animate form">
                            <form  action="zhuce.php" autocomplete="on" method="post"> 
                                <h1> 注册 </h1> 
                                <p> 
                                    <label for="usernamesignup" class="uname" data-icon="u">你的用户名</label>
                                    <input id="usernamesignup" name="name" required="required" type="text" placeholder="请设置您的账号" />
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > 你的电子邮件</label>
                                    <input id="emailsignup" name="youxiang" required="required" type="email" placeholder="请填写您的邮箱"/> 
                                </p>
                                <p> 
                                    <label for="emailsignup" class="youmail" data-icon="e" > 你的手机号码</label>
                                    <input id="passwordsignup" name="shouji" required="required" type="password" placeholder="请填写您的手机号码"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup" class="youpasswd" data-icon="p">你的密码 </label>
                                    <input id="passwordsignup" name="pass" required="required" type="password" placeholder="请设置您的密码"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">请确认密码 </label>
                                    <input id="passwordsignup_confirm" name="passw" required="required" type="password" placeholder="再次输入密码"/>
                                </p>
                                <p> 
                                    <label for="passwordsignup_confirm" class="youpasswd" data-icon="p">验证码 </label>
                                    <input id="passwordsignup_confirm" name="yzm" required="required" type="text" placeholder="请输入验证码"/>
                                    <img style="float:left; margin-top:5px;" src="yzm.php" width="250px" height="80px" onclick="this.src=this.src+'?time='+Math.random()">
                                </p>
                                
                                <p class="signin button"> 
                                    <input type="submit" value="注册" style="width:145px"/> 
                                </p>
                                <p class="change_link">  
                                    已经是一个成员 ?
                                    <a href="#tologin" class="to_register"> 去登录 </a>
                                </p>
                            </form>
                        </div>
                        
                    </div>
                </div>  
            </section>
        </div>
    </body>
</html>